<template>
  <h1>Hello Vue3</h1>
  <h2>{{ msg }}</h2>
  <button @click="changeMsg">点击运行事件</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
// ts 项目需要用 defineComponent 包起来，负责TS检查和提示
export default defineComponent({
  setup() {
    // 定义普通数据，无需写 data 结构
    let msg = 'Nice~'
    // 定义函数，无需写 methods 结构
    const changeMsg = () => {
      console.log('点击事件生效~~~')
    }
    // 在模版中需要使用的数据和函数，需要在 `setup` 返回
    return { msg, changeMsg }
  },
})
</script>
